<!--
 * Date: 2018年01月02日 09:32:33
 * LastEditors: lvyou
 * LastEditTime: 2019年11月28日 12:07:24
 * FilePath: \youlinweb-master\src\components\public-replace-imgs.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div>
    <div class="addcomments">
      <textarea maxlength="1000" @change="hehe" ref="textarea" v-model="mytextareatexts" class="addcommentstestarea" :style="textareaHeight" placeholder="描述一下您的闲置"></textarea>
      <span class="maxtext">({{textlength}}/1000)</span>
      <div class="upload">
        <div v-for="(item,index) in thumbnailslist.slice(0,9)" class="picdiv">
          <img v-lazy="item.src+'?imageMogr2/auto-orient'" class="imgsize">
          <span class="yl-2red-del deletepic" @click="deletepic(index)">
            <span class="path1">
              <span class="path2">
                <span class="path3"></span>
              </span>
            </span>
          </span>
        </div>
        <div :class="myjiasvg" class="addsvg" v-if="thumbnailslist.length<9">
          <input multiple="multiple" v-if="isupload==false" type="file" class="myinput" accept="image/gif, image/jpeg, image/png,image/jpg" @change="createImage($event)" />
          <div style="font-size: 0.2rem" v-if="isupload==true" class="progressvalue">
            <mt-spinner :size="40" type="fading-circle"></mt-spinner>
            <span style="margin-top: -0.5rem;position: absolute;margin-left: -0.38rem">{{progressvalue}}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import api from "src/api/index";
import { Spinner } from "mint-ui";
import calcTextareaHeight from 'src/config/calc';
//获取字符长度
function JHshStrLen(sString) {
  var sStr, iCount, i, strTemp;
  iCount = 0;
  sStr = sString.split("");
  for (i = 0; i < sStr.length; i++) {
    strTemp = escape(sStr[i]);
    if (strTemp.indexOf("%u", 0) == -1) // 是否是汉字  
    {
      iCount = iCount + 1;
    } else {
      iCount = iCount + 2;
    }
  }
  return iCount;
}

export default {
  data() {
    return {
      list: [],
      textlength: "0",
      progressvalue: "",
      isupload: "",
      textareaHeight: {},
      myjiasvg: "yl-2pic",
      mytextareatexts: this.textareatexts
    };
  },
  components: {
    Spinner
  },
  mounted() {
    this.getqiuniutoken();
    this.textareaHeight = calcTextareaHeight(this.$refs.textarea)
  },
  props: ["textareatexts", "thumbnailslist"],
  watch: {
    textareatexts(val, oldval) {
      this.mytextareatexts = val;
    },
    mytextareatexts() {
      this.textareaHeight = calcTextareaHeight(this.$refs.textarea);
      if(this.mytextareatexts){
          this.textlength= this.mytextareatexts.length
      }else{
        this.textlength="0"
      }
    }
  },
  methods: {
    deletepic(index) {
      this.thumbnailslist.splice(index, 1);
    },
    hehe() {
      this.$emit("haha", this.mytextareatexts);
    },
     //上传前压缩
    createImage(event){
      const self = this;
      this.myjiasvg = "";
      let file = event.target.files;
      let that = this;
      _each(file, (v, i) => {
        //判断图片上传类型
        var tempIndex = v.type.lastIndexOf("/");
        var imgType = v.type.substring(tempIndex+1);
        if(imgType!=="jpg"&&imgType!=="jpeg"&&imgType!=="png"&&imgType!=="gif"){
          that.$toast("不支持的图片类型");
          this.isupload = false;
          that.myjiasvg = "yl-2pic";
          return
        }
       //100k以上压缩
      if(v.size<102400){
         that.isupload = true;
         that.upload(v);
      }else{
        that.isupload = true;
        lrz(v, { quality: 0.8 }).then(function(rst) {
            v=rst.file;
            that.upload(v);
            return rst;
          }).catch(function (err) {
              // 处理失败会执行
              console.log(err)
          })
          .always(function () {
              // 不管是成功失败，都会执行
          });
      }
      })  
    },
    upload(v) {
        const self = this;
        const fd = new window.FormData();
        fd.append("file", v);
        fd.append("token", this.token);
        axios
          .post("https://upload-z2.qiniup.com/", fd, {
            headers: {
              "Content-Type": "multipart/form-data"
            },
            onUploadProgress(e) {
              const isLt10M = e.total / 1024 / 1024 > 20;
              self.progressvalue = parseFloat(e.loaded / e.total * 100).toFixed(
                2
              );
              if (isLt10M) {
                this.$toast("您上传的图片大于20M,请上传小于20M的图片!!");
                 this.isupload = false;
              }
            }
          }).catch(error => {
            this.isupload = false;
            this.$toast("图片上传超时!!");
          })
          .then(res => {
            var newimg = new Object();
            var thumbnailslistimg = new Object();
            newimg.src = "https://youlingqinius.wonderlandnet.cn/" + res.data.key;
            thumbnailslistimg.src =
              "https://youlingqinius.wonderlandnet.cn/" + res.data.key;
            let qiniuimgurl =
              "https://youlingqinius.wonderlandnet.cn/" + res.data.key + "?imageInfo";
            axios.get(qiniuimgurl).then(res => {
              if (res.status == "200") {
                this.list.push(newimg);
                this.thumbnailslist.push(thumbnailslistimg);
                this.$emit("commentpics", this.list);
                this.isupload = false;
                this.myjiasvg = "yl-2pic";
              }
            }).catch(error => {
               this.isupload = false;
            });
          });
     
    },
    getqiuniutoken() {
      api
        .Queryuploadtoken({})
        .then(res => {
          if (res.success) {
            this.token = res.token;
          }
        })
        .catch(error => {
          console.log(error);
          console.log("获取失败");
        });
    },
    descInput() {
      this.desc = this.desc.length;
    }
  }
};
</script>
<style lang="less" scoped>
.addcomments {
  width: 100%;
  background-color: white;
  position: relative;
  color: #999999;
  font-family: "PingFangSC Regular";
  font-size: 0.26rem;
}

.addcommentstestarea {
  width: 6.9rem;
  border: none;
  padding: 0;
  color: #666666;
  font-size: 0.28rem;
  margin: -0.88rem 0.3rem 0 0.3rem;
  line-height: 0.48rem;
  font-family: "PingFangSC Regular";
  padding-top: 1.08rem;
}

.maxtext {
  position: absolute;
  right: 0.3rem;
  bottom: 1.2rem;
  color: #999999;
  font-size: 0.24rem;
  display: inline-block;
  font-family: Arial;
}

.upload {
  width: 7.5rem;
  display: flex;
  flex-wrap: wrap;
  top: 3.8rem;
  background-color: white;
  padding: 0.25rem 0.1rem 0.15rem 0.3rem;
  max-height: 7.2rem;
}

.imgsize {
  width: 1rem;
  height: 1rem;
  margin-right: 0.18rem;
  margin-top: 0.2rem;
  overflow: scroll;
}

.addsvg {
  width: 1rem;
  height: 1rem;
  position: relative;
  text-align: center;
  line-height: 1rem;
  font-size: 1rem;
  color: #cccccc;
  margin-top: 0.2rem;
}

.addsvg input {
  opacity: 0;
}

.myinput {
  width: 1rem;
  height: 1rem;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
}

::-webkit-input-placeholder {
  color: #999999;
  font-size: 0.28rem;
  font-family: "PingFangSC Regular";
}

.deletepic {
  position: absolute;
  top: 0.05rem;
  right: 0.1rem;
  ;
  font-size: 0.3rem;
}

.picdiv {
  position: relative;
}

.progressvalue {
  position: absolute;
  left: 0.05rem;
  top: 0rem;
  height: 1.0rem;
}
</style>
